<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0042)http://jscs.cloudapp.net/ControlsSample/CM -->
<HTML xmlns="http://www.w3.org/1999/xhtml">
	<HEAD>
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	    <TITLE></TITLE>
	    <link  href="../../../../themes/default/ui.css" type="text/css" rel="stylesheet" />
	    <LINK href="../contextmenu.css" rel="stylesheet" type="text/css" />
	    <script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	    <SCRIPT src="../jquery.contextmenu.js" type="text/javascript"></SCRIPT> 
	   <!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
	    <STYLE type="text/css">
	        .target
	        {
	            position:absolute;
	            left:45%;
	            top:45%;
	            border:solid 1px #ffccee;   
	            padding:5px;
	            background-color:Blue;
	            color:#fff;
	         }
	    </STYLE>
	    
	    <SCRIPT type="text/javascript">
	    	 $(function(){
	            var option = { width: 150, items: [
                            { text: "第一项", icon: "../images/ico1.gif", alias: "1-1", action: menuAction,disable: true },
                            { text: "第二项", icon: "../images/ico2.gif", alias: "1-2", action: menuAction },
                            { text: "第三项", icon: "../images/ico3.gif", alias: "1-3", action: menuAction },
                            { type: "splitLine" },
                            { text: "第四项", icon: "../images/ico5.gif", alias: "1-5", action: menuAction }
                            ],
                            eventType:'contextmenu'
               };
            function menuAction() {
                alert("alias: " + this.data.alias + ";text: " + this.data.text );
            }
	            
	            $("#target1,#target2,#target3,#target4,#target5,#target6,#target7,#target8,#target9").contextmenu(option);
	            
	        });
	    </SCRIPT>
	</HEAD>
	<BODY>
			
	        <DIV id="target1" class="target" style="left:90%;top:45%;">在这里右击[东]</DIV>
	        <DIV id="target2" class="target" style="left:0%;top:45%;">在这里右击[西]</DIV>
	        <DIV id="target3" class="target" style="left:45%;top:95%;">在这里右击[南]</DIV>
	        <DIV id="target4" class="target" style="left:45%;top:0%;">在这里右击[北]</DIV>
	        
	        <DIV id="target5" class="target">在这里右击[中间]</DIV>
	        
	        <DIV id="target6" class="target" style="left:90%;top:0%;">在这里右击[东北]</DIV>
	        <DIV id="target7" class="target" style="left:0%;top:0%;">在这里右击[西北]</DIV>
	        <DIV id="target8" class="target" style="left:90%;top:95%;">在这里右击[东南]</DIV>
	        <DIV id="target9" class="target" style="left:0%;top:95%;">在这里右击[西南]</DIV>
	        
	</BODY>
</HTML>